import React from 'react'
import Style from './index.scss'
import { Avatar, notification } from 'antd'
import { connect } from 'react-redux'
import PicturesWall from '@components/pictures_wall'
import API from '@common/api'

@connect(store => ({
  userInfo: store.userInfo
}))
class PostTopic extends React.Component {
  state = {
    uploadStatus: 0,
    topicDescript: '',
    imgList: []
  }

  render() {
    const { userInfo, togglePostTopic } = this.props
    return (
      <div className={Style['post-topic']}>
        <section className="topic-content">
          <Avatar size={40} src={userInfo.avatarUrl} />

          <div className="upload-style">
            <PicturesWall successCb={this.successCb} />
          </div>

          <div className="descript">
            <textarea
              cols="50"
              rows="4"
              placeholder="愿意的话可以添加说明"
              value={this.state.topicDescript}
              onChange={this.handleChangeTextArea}
            />
          </div>
          <footer className="footer">
            <span className="close" onClick={togglePostTopic}>
              关闭
            </span>
            <span className="post" onClick={this.postTopic}>
              发贴
            </span>
          </footer>
        </section>
      </div>
    )
  }

  handleChangeTextArea = event => {
    this.setState({
      topicDescript: event.target.value
    })
  }

  postTopic = async () => {
    const { imgList, topicDescript } = this.state
    if (!imgList.length) {
      notification.success({
        message: '请选择图片'
      })
      return
    }
    const response = await API.addTopic({
      topicImg: imgList,
      topicTitle: topicDescript
    })
    notification.success({
      message: response.message
    })
    this.props.togglePostTopic()
  }

  successCb = imgList => {
    this.setState({
      imgList
    })
  }
}

export default PostTopic
